<template>
    <div class="paper-detail-container">
      <!-- 基本信息部分 -->
      <div class="base-info-section">
        <h2>基本信息</h2>
        <div class="info-grid">
          <div class="info-item">
            <span class="info-label">试卷分类名称</span>
            <span class="info-content">语文试卷/期末考试试卷</span>
          </div>
          <div class="info-item">
            <span class="info-label">试卷名称</span>
            <span class="info-content">初中语文考试试卷</span>
          </div>
          <div class="info-item">
            <span class="info-label">试卷类型</span>
            <span class="info-content">固定试题</span>
          </div>
          <div class="info-item">
            <span class="info-label">试卷难度</span>
            <span class="info-content">一般</span>
          </div>
        </div>
      </div>
  
      <!-- 试题信息部分 -->
      <div class="question-section">
        <h2>试题信息</h2>
        
        <!-- 第一部分 -->
        <div class="part-section">
          <div class="part-header">
            <h3>第一部分</h3>
            <input 
              type="text" 
              v-model="part1Description" 
              placeholder="请输入相应" 
              class="part-input"
            >
          </div>
          <p class="part-info">本部分共10个小题，每小题5分，共50分；在每小题给出的选项中，仅有一项是符合题目要求的。</p>
          
          <!-- 题目列表 -->
          <div class="question-list">
            <div v-for="(question, index) in part1Questions" :key="index" class="question-item">
              <div class="question-header">
                <span class="question-number">{{ index + 1 }}/10</span>
                <span class="question-type">单选题</span>
              </div>
              <p class="question-content">{{ question.content }}</p>
              
              <div class="options-list">
                <div v-for="(option, optIndex) in question.options" :key="optIndex" class="option-item">
                  <span class="option-label">{{ option.label }}</span>
                  <span class="option-content">{{ option.text }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        part1Description: '',
        part1Questions: [
          {
            content: '下列词语中，没有错的字的一组是哪个？',
            options: [
              { label: 'A', text: '编辑答案' },
              { label: 'B', text: '添加答案' },
              { label: 'C', text: '替换答案' },
              { label: 'D', text: '选择和删除' }
            ]
          },
          {
            content: '下列词语中，没有错的字的一组是哪个？',
            options: [
              { label: 'A', text: '编辑答案' },
              { label: 'B', text: '添加答案' },
              { label: 'C', text: '替换答案' },
              { label: 'D', text: '选择和删除' }
            ]
          }
          // 可以继续添加更多题目...
        ]
      };
    }
  };
  </script>
  
  <style scoped>
  .paper-detail-container {
    padding: 20px;
    background-color: #fff;
    font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
  }
  
  h2 {
    color: #333;
    font-size: 18px;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
  }
  
  /* 基本信息样式 */
  .base-info-section {
    margin-bottom: 30px;
  }
  
  .info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
  }
  
  .info-item {
    display: flex;
    align-items: center;
  }
  
  .info-label {
    width: 120px;
    color: #666;
    font-weight: bold;
  }
  
  .info-content {
    color: #333;
  }
  
  /* 试题部分样式 */
  .part-section {
    margin-bottom: 30px;
    border: 1px solid #f0f0f0;
    border-radius: 4px;
    padding: 15px;
  }
  
  .part-header {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
  }
  
  .part-header h3 {
    margin: 0 10px 0 0;
    font-size: 16px;
  }
  
  .part-input {
    flex: 1;
    padding: 5px 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
  }
  
  .part-info {
    color: #666;
    font-size: 14px;
    margin-bottom: 15px;
  }
  
  /* 题目列表样式 */
  .question-item {
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px dashed #eee;
  }
  
  .question-item:last-child {
    border-bottom: none;
  }
  
  .question-header {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
  }
  
  .question-number {
    color: #1890ff;
    font-weight: bold;
    margin-right: 10px;
  }
  
  .question-type {
    color: #666;
    font-size: 14px;
  }
  
  .question-content {
    margin: 0 0 10px 0;
    color: #333;
    line-height: 1.5;
  }
  
  /* 选项样式 */
  .options-list {
    margin-left: 20px;
  }
  
  .option-item {
    display: flex;
    margin-bottom: 8px;
  }
  
  .option-label {
    width: 20px;
    color: #333;
    font-weight: bold;
  }
  
  .option-content {
    color: #333;
  }
  </style>